<template>
	<view class="container">
		<view v-if="specialList.length" class="card-box">
			<view class="card-box-title">专项预案</view>
			<view class="card-box-content">
				<view @click="toDetail(item)" v-for="(item, index) in specialList" :key="index" class="card">
					<view class="title flex-row">
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="item">
						<view>修订日期：{{ item.updatetime }}</view>
						<view v-if="[1,3].includes(item.is_attend)">状态：<text class="status error">{{ item.is_attend == 1 ? '未参加' : '考核未通过' }}</text></view>
						<view v-else>状态：<text class="status success">{{ item.is_attend == 2 ? '考核通过' : '无需考核' }}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="multiList.length" class="card-box">
			<view class="card-box-title">综合预案</view>
			<view class="card-box-content">
				<view @click="toDetail(item)" v-for="(item, index) in multiList" :key="index" class="card">
					<view class="title flex-row">
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="item">
						<view>修订日期：{{ item.updatetime }}</view>
						<view v-if="[1,3].includes(item.is_attend)">状态：<text class="status error">{{ item.is_attend == 1 ? '未参加' : '考核未通过' }}</text></view>
						<view v-else>状态：<text class="status success">{{ item.is_attend == 2 ? '考核通过' : '无需考核' }}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="sceneList.length" class="card-box">
			<view class="card-box-title">综合预案</view>
			<view class="card-box-content">
				<view @click="toDetail(item)" v-for="(item, index) in sceneList" :key="index" class="card">
					<view class="title flex-row">
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="item">
						<view>修订日期：{{ item.updatetime }}</view>
						<view v-if="[1,3].includes(item.is_attend)">状态：<text class="status error">{{ item.is_attend == 1 ? '未参加' : '考核未通过' }}</text></view>
						<view v-else>状态：<text class="status success">{{ item.is_attend == 2 ? '考核通过' : '无需考核' }}</text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata">没有更多了</view>
	</view>
</template>

<script>
// 预案类型
const PLAN_TYPES = ['专项预案','综合预案','现场处置方案'];
export default{
	data(){
		return {
			tabIndex: 0,
			userid: uni.getStorageSync('userid'),
			page: 1,
			total: 1,
			list: [],
			specialList: [],
			multiList: [],
			sceneList: []
		}
	},
	onLoad(){
		this.getList();
	},
	methods: {
		toDetail(item){
			uni.setStorageSync('emergency_plan_detail', item);
			uni.navigateTo({url: 'detail'});
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.emergencyPlanList,
				data: { userid: this.userid },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					
					// 判断是第一页还是后续页
					let data = res.data.rows;
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
					
					// 处理数据：按类型讲数据分组
					_this.list.forEach(item=>{
						if(item.type == PLAN_TYPES[0]) _this.specialList.push(item);
						if(item.type == PLAN_TYPES[1]) _this.multiList.push(item);
						if(item.type == PLAN_TYPES[2]) _this.sceneList.push(item);
					});
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	padding: 20upx 0;
	box-sizing: border-box;
}



/*卡片容器*/
.card-box{
	background: #fff;
	margin-bottom: 20upx;
	padding: 20upx 20upx 2upx;
}
.card-box-title{
	font-weight: bold;
	text-indent: 40upx;
	position: relative;
}
.card-box-title::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #609EF4;
	border-radius: 4upx;
	position: absolute;
	top: 12upx;
	left: 20upx;
}
.card-box-content{
	padding-top: 10upx;
}


/*卡片*/
.card{
	margin-bottom: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	font-weight: bold;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}
.card .item .error{
	color: red;
}
.card .item .success{
	color: #1AA034;
}
</style>
